<template>
  <div class="p-6">
    <div class="flex items-center">
      <div class="flex items-center">
        <!-- <div class="my_item__label">OKX（U本位合约）</div> -->
        <el-select
          style="width: 160px"
          v-model="keyInfo.heyue"
          placeholder="Select"
          size="large"
        >
          <el-option label="Binance(U本位合约)" :value="1" />
        </el-select>
      </div>
      <div class="flex items-center ml-8">
        <div class="my_item__label">币种：</div>
        <el-select
          v-model="keyInfo.bihzong"
          placeholder="Select"
          size="large"
          style="width: 160px"
        >
          <el-option label="BTCUSDT" :value="1" />
        </el-select>
      </div>
      <el-button type="primary" class="ml-8">新增窗口</el-button>
    </div>
    <el-form
      label-width="auto"
      :model="keyInfo"
      ref="ruleFormRef"
      class="p-6 mt-6 rounded-md"
      style="background-color: #151a24"
    >
      <div class="flex items-center">
        <el-form-item label="USDT可用：" prop="usdt_use">
          <div class="text-md text-white">{{ keyInfo.usdt_use }}</div>
        </el-form-item>
        <el-form-item label="USDT冻结：" class="ml-4">
          <div class="text-md text-white">{{ keyInfo.usdt_frozen }}</div>
        </el-form-item>
      </div>
      <div class="flex items-center">
        <el-form-item label="当前持仓：">
          <div class="text-md text-white">{{ keyInfo.chicang }}</div>
        </el-form-item>
        <el-form-item label="杠杆倍数：" class="ml-4">
          <el-input-number v-model="keyInfo.multiple" :min="5" :max="20" />
        </el-form-item>
      </div>
      <div class="flex items-center">
        <el-form-item class="flex items-center" label="小键盘状态：">
          <el-switch v-model="keyInfo.switch_status" />
        </el-form-item>
        <div class="ml-6 mb-4 text-sm">
          如果小键盘开启，那么显示当前鼠标放置在哪一个下单币种上的
        </div>
      </div>
    </el-form>

    <!-- 实时数据 -->
    <div class="flex justify-between mt-4">
      <el-table
        class="my_table"
        :data="tableData"
        :border="false"
        style="width: calc(50% - 5px)"
      >
        <el-table-column prop="prce" label="价">
          <template #default="scope">
            <div v-if="scope.row.type" style="color: red">
              {{ scope.row.prce }}
            </div>
            <div v-else style="color: #3cb371">{{ scope.row.prce }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="laing" label="量">
          <template #default="scope">
            <div v-if="scope.row.type" style="color: red">
              {{ scope.row.laing }}
            </div>
            <div v-else style="color: #3cb371">{{ scope.row.laing }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="all" label="累计">
          <template #default="scope">
            <div v-if="scope.row.type" style="color: red">
              {{ scope.row.all }}
            </div>
            <div v-else style="color: #3cb371">{{ scope.row.all }}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        style="width: calc(50% - 5px)"
        :data="right_tableData"
        :border="false"
      >
        <el-table-column prop="data" label="时间" />
        <el-table-column prop="prce" label="价">
          <template #default="scope">
            <div v-if="scope.row.type" style="color: red">
              {{ scope.row.prce }}
            </div>
            <div v-else style="color: #3cb371">{{ scope.row.prce }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="laing" label="量">
          <template #default="scope">
            <div v-if="scope.row.type" style="color: red">
              {{ scope.row.laing }}
            </div>
            <div v-else style="color: #3cb371">{{ scope.row.laing }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import Mousetrap from "mousetrap";
import { useTransition } from "@vueuse/core";

const source = ref(0);
const outputValue = useTransition(source, {
  duration: 1500,
});
source.value = 172000;

const keyInfo = ref({
  usdt_use: "1240.4",
  usdt_frozen: "40.4",
  chicang: "1 BTC",
  multiple: 10,
  switch_status: false,
  heyue: 1,
  bihzong: 1,
});

const tableData = [
  {
    prce: "32.33",
    laing: "510.88",
    all: "888.9",
    type: 0,
  },
  {
    prce: "32.33",
    laing: "510.88",
    all: "888.9",
    type: 1,
  },
];
const right_tableData = [
  {
    data: "12:32:10",
    prce: "510.88",
    laing: "888.9",
    type: 1,
  },
  {
    data: "12:32:10",
    prce: "510.88",
    laing: "888.9",
    type: 0,
  },
];

Mousetrap.bind("6", function () {
  // 处理键盘事件的回调函数
  console.log(1111);
});
</script>

<style lang="scss" scoped>
::v-deep(.el-form-item__label) {
  color: #5a4e44 !important;
}

.my_item__label {
  color: #5a4e44 !important;
}

/*最外层透明*/
::v-deep(.el-table),
::v-deep(.el-table__expanded-cell) {
  background-color: #151a24 !important;
  font-weight: 600;
  color: #fff !important;
}
/* 表格内背景颜色 */
::v-deep(.el-table th),
::v-deep(.el-table tr),
::v-deep(.el-table td) {
  background-color: #151a24 !important;
  border: 0; //去除表格
}
/*去除底边框*/
::v-deep(.el-table td.el-table__cell) {
  border: 0;
}
::v-deep(.el-table th.el-table__cell.is-leaf) {
  border: 0;
}
/*去除底部灰条.el-table::before*/
::v-deep(.el-table::before) {
  display: none;
}
</style>
